<template>
    <div class="block-wrap">
        <div class="block-item" :style="{backgroundColor:item.color,width:item.width+'px'}" v-for="item in dynamicData.list">
            <span class="title">{{item.title}}</span>
            <span class="value">{{item.value}}</span>
        </div>
    </div>
</template>

<script>
    import mixin from './mixin'
    export default {
        mixins:[new mixin()],
        name: "blockText",
        data() {
            return {
                // 暴露在外的表单属性
                interfaceAttrs: {
                    list: {
                        type: 'Object',
                        name: '标题',
                        default:[
                            {title:'订单量',width:80,value:200,color:'red'},
                            {title:'商品数量',width:80,value:200,color:'green'},
                            {title:'订单量',width:120,value:200,color:'pink'}
                        ],
                    }
                },
            }
        },
    }
</script>

<style scoped lang="stylus">
.block-wrap{
    display: flex
    flex-wrap wrap
}
.block-item{
    color white
    padding 6px 10px
    background-color green
    border-radius 4px
    display flex
    flex-direction column
    margin-right:8px;
    margin-bottom: 8px;
    .title{
        font-size 14px
    }
    .value{
        font-size 24px
        margin-top 10px
    }
}
</style>
